<template>
	<view class="mine">
		<!-- 用户信息 -->
		<view class="header">
			<view class="header-name">
				<text class="header-title">{{headerInfo.headerTitle}}</text>
				<text class="header-des">{{headerInfo.headerDes}}</text>
			</view>
			<view class="header-img">
				<image :src="headerInfo.imgUrl"></image>
			</view>
		</view>
		
		<!-- 下边线条 -->
		<view class="hr"></view>
		
		<!-- 用户列表 -->
		<view class="user-list">
			<view class="user-list-li" v-for="(item,index) in userList" :key="index" @tap="handerNavTo(index)">
				<view class="user-list-view">
					<image class="user-icon" :src="item.imgUrl"></image>
					<tex>{{item.text}}</tex>
				</view>
				<image class="user-left" :src="item.leftUrl"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				headerInfo:{
					"headerTitle":'吃货的世界',
					"headerDes": '欢迎来到四海香小程序',
					"imgUrl": '../../static/imgs/other/img10.png'
				},
				userList:[
					{
						"imgUrl":'../../static/imgs/mine-记录@2x.png',
						"text": '烹饪历史',
						"leftUrl":'../../static/imgs/enter.png'
					},
						{
							"imgUrl":'../../static/imgs/mine-钱(1)@2x.png',
							"text": '支付记录',
							"leftUrl":'../../static/imgs/enter.png'
						},
					{
						"imgUrl":'../../static/imgs/mine-意见反馈@2x.png',
						"text": '举报投诉',
						"leftUrl":'../../static/imgs/enter.png'
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			handerNavTo(i){
				if(i === 2){
					uni.navigateTo({
						url:'/pages/complain/complain'
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	
	.hr{
		border-bottom: 1rpx solid #efefef;
		margin: 30rpx 0;
	}
	
	// 用户信息
	.header{
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.header-name{
			display: flex;
			flex-direction: column;
			.header-title{
				font-size: 38rpx;
				line-height: 2;
			}
			.header-des{
				color: #999;
				font-size: 28rpx;
			}
		}
		.header-img{
			image{
				width: 136rpx;
				height: 136rpx;
				vertical-align: middle;
			}
		}
	}
	
	// 用户列表
	.user-list{
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.user-list-li{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			position: relative;
			&.user-list-li::after{
				content: '';
				position: absolute;
				bottom: -30rpx;
				right: 0;
				width: 90%;
				height: 1rpx;
				border-bottom: 1rpx solid #efefef;
			}
			.user-list-view{
				display: flex;
			}
			.user-icon{
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
				margin-right: 30rpx;
			}
			.user-left{
				width: 17rpx;
				height: 34rpx;
				vertical-align: middle;
			}
		}
	}

</style>
